import ApiTable, { TagFC } from "@/components/api-table";
import { SubTitle } from "@/components/layout/Article";
import Required from "@/components/Required";

export default function UseReactorListener() {
  const paramData: Parameters<typeof ApiTable>["0"]["rows"] = [
    {
      name: "target",
      type: "Reactor<T>",
      defaultValue: <Required children="Required" />,
      desc: "An instance of Reactor Class",
    },
    {
      name: "callback",
      type: TagFC.Function("(value: T) => void"),
      defaultValue: TagFC.Undefined(),
      desc: "callback function",
    },
    // {
    //   name: "valueMap",
    //   type: "object",
    //   defaultValue: { true: true, false: false },
    //   desc: "mapping of returned values",
    //   properties: [
    //     {
    //       name: "true",
    //       type: "boolean | T",
    //       defaultValue: true,
    //        desc: "value returned when toggle is on",
    //     },
    //     {
    //       name: "false",
    //       type: "boolean | F",
    //       defaultValue: false,
    //       desc: "value returned when toggle is off",
    //     },
    //   ],
    // },
  ];

  const returnData: Parameters<typeof ApiTable>["0"]["rows"] = [
    // {
    //   name: "[0] isOn",
    //   type: "boolean | T | F",
    //   defaultValue: null,
    //   desc: "state of toggle",
    // },
    // {
    //   name: "[1] toggle",
    //   type: "() => void",
    //   desc: "toggle function",
    //   },
    // {
    //   name: "[2] setToggle",
    //   type: "(value: boolean|(value => boolean)) => void",
    //   desc: "set toggle function",
    // },
  ];

  return (
    <>
      <SubTitle id="hook-api">Api of useReactorListener</SubTitle>
      <SubTitle low top="20px">
        Parameters
      </SubTitle>
      <ApiTable param rows={paramData} />
      <SubTitle low top="20px">
        ReturnValue (Void)
      </SubTitle>
      {/* <ApiTable return rows={returnData} /> */}
    </>
  );
}
